<template>
  <a-modal
    style="width: 50%"
    :title="titleMap[mode]"
    :visible="visible"
    :confirm-loading="confirmLoading"
    :destroyOnClose="true"
    @cancel="handleCancel"
    :maskClosable="false">
    <div style="margin-top: 12px;min-height: 300px;min-width: 650px">
      <a-form-model ref="ruleAddForm" :model="addForm" :rules="addRules">
        <a-form-model-item label="资源类型" prop="resourceType" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-select placeholder="请选择资源类型" v-model="addForm.resourceType" @select="onResourceType">
            <a-select-option v-for="(item, index) in resourceTypeList" :key="item.value">{{ item.name
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="备注" prop="description" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-input placeholder="请输入备注" v-model="addForm.description" type="text" :max-length="255" />
        </a-form-model-item>
        <a-form-model-item
          ref="url"
          label="路径"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          v-show="addForm.resourceType != 3">
          <a-input v-model.trim="addForm.url" :max-length="100" placeholder="请输入路径"></a-input>
        </a-form-model-item>
        <a-form-model-item
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          label="菜单图标"
          v-show="addForm.resourceType == 1 || addForm.resourceType == 2">
          <a-input placeholder="点击选择图标" v-model="addForm.icon" :disabled="true">
            <a-icon slot="addonAfter" type="setting" @click="selectIcons" />
          </a-input>
        </a-form-model-item>

        <a-form-model-item
          label="请求方法"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          v-show="addForm.resourceType == 4">
          <a-select placeholder="请选择请求类型" allowClear v-model="addForm.method" @select="onMethod">
            <a-select-option :value="item" v-for="(item, index) in methodList" :key="index">{{ item
            }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          label="接口资源"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          v-show="addForm.resourceType == 3">
          <!-- <a-select v-model="addForm.resourceIds" placeholder="请选择接口资源" mode="multiple"
                         :defaultValue="Ids" @change="apiChange">
                        <a-select-option v-for="item in apiList" :key="item.resourceId
                            " :label="item.description" :value="item.resourceId">
                            {{ item.description }}
                        </a-select-option>
                    </a-select> -->
          <PaginationSearchSelect typeMode="multiple" @input="onInput" ref="PaginationSelect">
          </PaginationSearchSelect>
        </a-form-model-item>
        <!-- 选择图标 -->
        <icons @choose="handleIconChoose" @close="handleIconCancel" :iconChooseVisible="iconChooseVisible"></icons>
      </a-form-model>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a-button type="primary" :visible="visibleBtn" :loading="loadingBtn" @click="handleOk">
        保存
      </a-button>
    </template>
  </a-modal>
</template>
<script>
import Icons from '@/components/Icon'
import { getResources, addResources, editResources, detailResources } from '@/api/resource'
import PaginationSearchSelect from '@/components/PaginationSearchSelect/PaginationSearchSelect'
export default {
    components: { Icons, PaginationSearchSelect },
    data () {
        return {
            addRules: {
                description: [
                    { required: true, message: '请输入备注!', trigger: 'blur' }
                ],
                resourceType: [
                    { required: true, message: '请选择资源类型!', trigger: 'blur' }
                ]
            },
            methodList: ['GET', 'POST', 'PUT', 'DELETE'],
            resourceTypeList: [{ value: 1, name: '菜单项' }, { value: 2, name: '页面' }, { value: 3, name: '操作' }, { value: 4, name: '访问接口' }],
            addForm: {
                description: '',
                url: null,
                icon: '',
                method: undefined,
                resourceType: undefined,
                resourceIds: undefined,
                relatedResources: ''
            },
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 }
            },
            iconChooseVisible: false,
            visible: false,
            confirmLoading: false,
            loading: false,
            visibleBtn: false,
            loadingBtn: false,
            mode: 'add',
            titleMap: {
                add: '新增',
                edit: '编辑'
            },
            rowData: '',
            apiList: [],
            pagination: {
                // 分页配置
                pageSize: 100, // 每页显示的条数
                current: 1, // 当前页数
                resourceType: 4,
                description: ''
            },
            Ids: []
        }
    },
    mounted () {

    },
    methods: {
        apiChange (e) {
            this.addForm.resourceIds = e
            this.Ids = e
        },
        onInput (e) {
            // console.log(e)
            this.addForm.resourceIds = e
            this.Ids = e
        },
        // 获取访问接口
        // getOperation() {
        //     getResources(this.pagination).then(res => {
        //         if (res.code == 200) {
        //             this.apiList = res.data.datas
        //         }
        //     })
        // },
        // 显示
        open (mode = 'add') {
            this.mode = mode
            this.visible = true
            // this.getOperation()
            this.apiList = []
            return this
        },
        // 访问资源类型
        onResourceType (e) {
            this.addForm.resourceType = e
            // 资源类型为操作 3
            if (e == 3) {
                this.$nextTick(() => {
                    this.$refs.PaginationSelect.init()
                })
            }
        },
        // 请求资源类型
        onMethod (e) {
            this.addForm.method = e
        },
        // 获取行数据和id
        setData (row) {
            this.rowData = row
            const _this = this
            if (this.mode == 'edit') {
                detailResources(row.resourceId).then(res => {
                    if (res.code == 200) {
                        this.addForm = res.data
                        const resourceIds = res.data.relatedResources
                        if (resourceIds && resourceIds.length > 0) {
                            this.addForm.resourceIds = resourceIds.map(item => {
                                return item.resourceId
                            })
                            this.Ids = this.addForm.resourceIds
                            _this.$nextTick(() => {
                                const par = {
                                    resourceType: 3,
                                    relatedResources: res.data.relatedResources
                                }
                                _this.$refs.PaginationSelect.init(par)
                            })
                        }
                    }
                })
            } else {
                _this.$nextTick(() => {
                    _this.$refs.PaginationSelect.init()
                })
            }
        },
        selectIcons () {
            this.iconChooseVisible = true
        },
        handleIconCancel () {
            this.iconChooseVisible = false
        },
        handleIconChoose (value) {
            this.addForm.icon = value
            this.iconChooseVisible = false
        },
        // 关闭
        handleCancel () {
            this.visible = false
            this.loadingBtn = false
            this.visibleBtn = false
            this.$emit('close')
        },
        // 确认
        handleOk () {
            this.loadingBtn = true
            this.visibleBtn = true
            this.$refs.ruleAddForm.validate(valid => {
                if (valid) {
                    const Api = this.mode == 'add' ? addResources : editResources
                    const par = {
                        ...this.addForm
                    }
                    if (par.resourceType == undefined) par.resourceType = ''
                    if (par.method == undefined) par.method = ''
                    Api(this.addForm).then(res => {
                        console.log(res)
                        if (res.code === 200) {
                            this.$notification['success']({
                                message: '提示',
                                description: '保存成功！',
                                duration: 8
                            })
                            this.visible = false
                            this.$emit('success')
                        } else {
                            this.$notification['error']({
                                message: '提示',
                                description: res.message,
                                duration: 8
                            })
                        }
                        this.visibleBtn = false
                        this.loadingBtn = false
                    })
                } else {
                    this.loadingBtn = false
                    this.visibleBtn = false
                    return false
                }
            })
        }
    }
}
</script>
<style scoped lang="less" ></style>
